<template>
  <div class="container">


    <div class="handle-button">

      <label><input type="checkbox" v-model="editable">启用拖放</label>

      <button type="button" @click="orderList">恢复默认</button>
    </div>


    <table>
      <tr>
        <td>
          <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" :move="onMove"
            @start="isDragging = true" @end="isDragging = false">
            <transition-group type="transition" :name="'flip-list'">
              <li class="list-group-item" v-for="element in list" :key="element.order">
                <i :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                  @click="element.fixed = !element.fixed" aria-hidden="true"></i>
                {{ element.name }}
                <span class="badge">{{ element.order }}</span>
              </li>
            </transition-group>
          </draggable>
        </td>
        <td>
          <draggable element="span" v-model="list2" v-bind="dragOptions" :move="onMove">
            <transition-group name="no" class="list-group" tag="ul">
              <li class="list-group-item" v-for="element in list2" :key="element.order">
                <i :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                  @click="element.fixed = !element.fixed" aria-hidden="true"></i>
                {{ element.name }}
                <span class="badge">{{ element.order }}</span>
              </li>
            </transition-group>
          </draggable>
        </td>
      </tr>
    </table>


    <table>
      <tr>
        <td>
          <pre>{{ listString }}</pre>
        </td>
        <td>
          <pre>{{ list2String }}</pre>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import draggable from "vuedraggable";
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
];

export default {
  name: "hello",
  components: {
    draggable
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1, fixed: false };
      }),
      list2: [],
      editable: true,
      isDragging: false,
      delayedDragging: false
    };
  },
  methods: {
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order;
      });
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost"
      };
    },
    listString() {
      return JSON.stringify(this.list, null, 2);
    },
    list2String() {
      return JSON.stringify(this.list2, null, 2);
    }
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  }
};
</script>

<style lang='scss' type='text/scss' scoped>
.handle-button {
  padding: 10px;

  button {
    margin-left: 20px;
  }
}

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 300px;
}

.list-group-item {
  cursor: move;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.list-group-item i {
  cursor: pointer;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 12px;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

table {
  width: 100%;

  td {
    width: 50%;
  }
}
</style>